<template>
    <!-- 如果需要高级搜索，给table组件添加属性 needMoreSer 为 true 即可 -->
    <myTable :tableOption="tableOption" @handleAdd="handleAdd" ref='table' @handleEdit="handleEdit" :searchInfo.sync="searchInfo">
        <div slot="searchBox" style="float: left">
            <Input placeholder="输入员工姓名..." v-model="searchInfo.mobile" style="width: 200px;" />
        </div>
    </myTable>
</template>

<script>
    import myTable from '@/components/tables/baseTable.vue';
    import {
        lockAction
    } from '@/api/table.js'
    import crypto from 'crypto'
    export default {
        name: 'base-table',
        components: {
            myTable
        },
        data() {
            return {
                tableOption: {
                    // 更多搜索
                    needMoreSer: false,
                    // 对话框的字段，需要传入子组件
                    // 定义子组件表格的增删改查接口
                    apis: {
                        list: 'markLib/list',
                        remove: '/front/remove',
                        update: "/front/update",
                        search: "/front/search",
                        save: "/front/save",
                    },
                    // 弹窗的表单
                    formItems: [
                        {
                            key: "username",
                            label: "用户名",
                            rule: 'required',
                            type:'text',
                            value:""
                        },
                        {
                            key: "mobile",
                            label: "手机号",
                            rule: 'required',
                            type:'text',
                            value:""
                        },
                        {
                            key: "nickname",
                            label: "真实姓名",
                            type:'text',
                            value:"",
                            rule:"urlregex"
                        },
                        {
                            key: "password",
                            label: "密码",
                            type:'password',
                            value:""
                        }
                    ],
                    // 定义表格列字段以及可以自定义渲染
                    cols: [{
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    }, {
                        title: 'ID',
                        key: 'id',
                        width: 160
                    }, {
                        title: '书签分类',
                        key: 'markName'
                    }, {
                        title: '内容介绍',
                        key: 'content'
                    }, {
                        title: '创建时间',
                        key: 'createTime'
                    }, {
                        title: "操作",
                        width: 200,
                        key: 'action',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleEdit(params.row)
                                        }
                                    }
                                }, '编辑'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.handleRemove(params.row)
                                        }
                                    }
                                }, '删除'),
                                // h('Poptip', [
                                //     h('Button', {
                                //         props: {
                                //             size: 'small',
                                //             type: 'warning'
                                //         }
                                //     }, '修改状态'),
                                //     h('div', {
                                //         slot: "content"
                                //     }, [
                                //         h('span', '用户状态：'),
                                //         h('i-switch', {
                                //             props: {
                                //                 size: "large",
                                //                 value: params.row.status == 1
                                //             },
                                //             on: {
                                //                 'on-change': (value) => {
                                //                     this.changeStatus(value, params.row.userId)
                                //                 }
                                //             }
                                //         }, [
                                //             h('span', {
                                //                 slot: "open"
                                //             }, '启用'),
                                //             h('span', {
                                //                 slot: "close"
                                //             }, '禁用'),
                                //         ])
                                //     ]),

                                // ])

                            ]);
                        }
                    }],
                },
                // 搜索的字段
                searchInfo: {},
            }
        },
        methods: {
            // md5加密
            getmd5(value) {
                let md5 = crypto.createHash("md5");
                md5.update(value);
                let result = md5.digest('hex');
                return result;
            },
            // 编辑事件
            handleEdit(param) {
                // 深拷贝，防止对话框和表格内容双向绑定
                let params = {
                    needNew: false,
                    data: param
                }
                this.$refs.table.handleEdit(params)
            },
            // 添加事件
            handleAdd() {
                let params = {
                    needNew: false
                } //不打开新页面
                // 通过ref调用子组件的事件
                this.$refs.table.afterAdd(params)
            },
            // 删除事件
            handleRemove(params) {
                this.$refs.table.handleRemove(params.id, 'one')
            },
            // 禁用启用事件
            changeStatus(bool, id) {
                let url = '';
                url = bool ? '/admin/f0106' : '/admin/f0105';
                this.$Modal.confirm({
                    title: '警告',
                    content: '<p>该操作将 禁用 / 启用 选定的用户，确认要继续吗？</p>',
                    loading: true,
                    onOk: () => {
                        lockAction(id, url).then(res => {
                            if (res.status == 'SUCCESS') {
                                this.$Modal.remove();
                                this.$refs.table.handleRefresh();
                                this.$Message.success('操作成功！');
                            } else
                                this.$Message.error('操作失败！');
                        })
                    }
                });

            }
        },
    }
</script>

<style>

</style>
